<template>


  <!-- 头部导航栏 -->
  <header id="header">
    <div class="container d-flex align-items-center">
      <a href="#" class="logo me-auto"><img src="../../../assets/711/711.svg" alt="" class="img-fluid">
        <span>柒壹零</span>
      </a>
      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#">首页</a></li>

          <li><a class="nav-link scrollto">适用场景</a></li>
          <li><a class="nav-link scrollto">社区公告</a></li>
          <li><a class="nav-link scrollto">物业管理</a></li>
          <li><a class="nav-link scrollto">智能硬件</a></li>
          <li class="lianxi" style="margin-right: 111px;"><a class="nav-link scrollto">联系我们</a></li>
          <li style="display:none" class="homeLogin"><a class="popups getstarted scrollto"
              href="http://localhost/login">登录</a></li>
          <li class="homeLogo" style="position:absolute;right: 120px;"><img src="../../../assets/logo/头像.jpg" alt=""
              style="width: 40px;border-radius: 20px;"></li>
          <li class="homeUser" style="position:absolute;right: 60px;"><a id="useridName" ref="useridName"
              class="nav-link scrollto useridName">张柏焰</a>
          </li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header>
  <!-- 返回箭头 -->
  <div class="back-arrow">
    <img src="../../../assets/b/上箭头.png" alt="">
  </div>
  <!-- 总的背景 -->
  <img class="bgbg" src="../../../assets/b/section3-bg.jpg" alt="">

  <div style="height: 70px;"></div>
  <!-- 走马灯 -->
  <div class="lunbo">
    <div class="bColor">
      <!-- step1 -->
      <div class="e_container ecActive">
        <div class="effect_container">
          <h2 class="fadeInDown">专业智慧社区系统和物业管理系统研发</h2>
          <p class="fadeInUp ">让物业管理更轻松，让社区更智能，让业主更满意，让物业创收渠道更丰富……
          </p>
          <a id="fffbtn" class="f_btn">免费试用</a>
        </div>
      </div>

      <!-- step2 -->
      <div class="e_container">
        <div class="effect_container">
          <h2 class="fadeInDown">智慧物联网+智能物业管理</h2>
          <p class="fadeInUp">打造高效 安全 智能 又容易商业变现的物业服务系统，支持接入各类智能硬件产品，提供软硬件一体化的智慧社区解决方案
          </p>
          <a class="f_btn">免费试用</a>
        </div>
      </div>

      <!-- step3 -->
      <div class="e_container">
        <div class="effect_container">
          <h2 class="fadeInDown">新一代物业管理系统 整合业主资源 建立业主运营体系</h2>
          <p class="fadeInUp">以企业微信、微信公众号、微信小程序、APP为载体，统筹业主资源，建立业主CRM体系，实现物业收益最大化
          </p>
          <a class="f_btn">免费试用</a>
        </div>
      </div>




    </div>
    <div class="content">
      <ul id="item">
        <li class="item">
          <img src="../../../assets/zmd/slide-1.jpg">
        </li>
        <li class="item">
          <img src="../../../assets/zmd/slide-2.jpg">
        </li>
        <li class="item">
          <img src="../../../assets/zmd/slide-3.jpg">
        </li>


      </ul>
      <div id="btn-left">
        < </div>
          <div id="btn-right">></div>
          <ul id="circle">

            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>

          </ul>
      </div>
    </div>
    <!-- 轮播下方第一个模块 -->

    <div id="ic" class="ic"> <el-row :gutter="20">
        <el-col :span="6">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z" />
          </svg>
          <h3 class="sh"><a>多端支持</a></h3>
          <span class="ss">公众号 小程序 APP 企业微信多端支持</span>
        </el-col>
        <el-col :span="6">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z" />
          </svg>
          <h3 class="sh"><a>私有部署</a></h3>
          <span class="ss">系统私有化安装,支持二开</span>
        </el-col>
        <el-col :span="6">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z" />
            <path
              d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z" />
            <path
              d="M10 7a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7Zm-6 4a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm4-3a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1Z" />
          </svg>
          <h3 class="sh"><a>数据私有</a></h3>
          <span class="ss">自动保存数据,安全保密</span>
        </el-col>
        <el-col :span="6">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z" />
            <path
              d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
          </svg>
          <h3 class="sh"><a>迭代快速</a></h3>
          <span class="ss">每月至少一次的版本升级</span>
        </el-col>
      </el-row></div>
    <!-- 系统应用场景 -->
    <div id="xtyycj" class="cte">

      <div id="ass">
        <h2>

          系统应用场景
        </h2>
        <p>功能涵盖智慧社区建设 物业管理 物业办公 物业CRM，适用于社区 园区 写字楼 商住 公寓</p>
      </div>
      <div class="row no-gutters">

        <div class="col-lg-4 col-md-6 content-item">
          <span>01</span>
          <h4>物业数字化管理</h4>
          <p>聚焦物业的管理需求及业主的实际生活场景，提高物业管理效率，增强业主幸福指数</p>
        </div>

        <div class="col-lg-4 col-md-6 content-item">
          <span>02</span>
          <h4>智慧社区建设</h4>
          <p>多种商业变现的应用支持，助力商业运营方快速整合社区周边商业资源</p>
        </div>

        <div class="col-lg-4 col-md-6 content-item">
          <span>03</span>
          <h4>业主精细化运营</h4>
          <p>通过物业SCRM精细化管理运营业主，做好业主画像，拓展社区商业机会</p>
        </div>

        <div class="col-lg-4 col-md-6 content-item">
          <span>04</span>
          <h4>物业数字化办公</h4>
          <p>将物业内部办公移动化 数字化，包括文件管理 请假 考勤 审批 汇报等应用</p>
        </div>

        <div class="col-lg-4 col-md-6 content-item">
          <span id="b3">05</span>
          <h4>商业写字楼管理</h4>
          <p>针对商业写字楼 公寓 园区的物业管理和资产租赁管理解决方案</p>
        </div>

        <div class="col-lg-4 col-md-6 content-item">
          <span>06</span>
          <h4>智慧街道建设</h4>
          <p>为街道、社区提供民生管理、智慧党建、综治管理等全场景解决方案</p>
        </div>

      </div>

    </div>





    <div class="client">
      <div id="ass">
        <h2>

          社区公告内容
        </h2>
        <p>功能涵盖智慧社区建设 物业管理 物业办公 物业CRM，适用于社区 园区 写字楼 商住 公寓</p>
      </div>
      <div class="ct">
        <el-row>
          <el-col :span="9" class="bulletin1">
            <ul class="uf">
              <li style="padding-bottom: 12px;">
                <div class="common-layout">
                  <el-container style="cursor: pointer;">
                    <el-aside width="100px" class='tp'><em>11</em><span class="tSpan">2024.07</span></el-aside>
                    <el-main class="co">

                      <h3>
                        2024社区综合管控平台柒壹零项目作业完成</h3>
                      <p>
                        7月11日，基于若依前后端分离框架制作社区综合管控平台的以宿舍号命名项目作业完成,组员张柏焰,熊金平,严伟程,徐志良,林锦耀,吴宝杰
                      </p>
                    </el-main>
                  </el-container>
                </div>
              </li>


              <li>
                <div class="common-layout">
                  <el-container class="Cfocus">
                    <el-aside width="100px" class='tp'><em>09</em><span class="tSpan">2024.07</span></el-aside>
                    <el-main class="co">

                      <h3>
                        功能点人员出入管理 人口管理完成</h3>
                      <img class="yjt " src="../../../assets/b/news-list-ic1.png" alt="">
                      <img class="yjtA  " src="../../../assets/b/news-list-ic2.png" alt="">
                    </el-main>
                  </el-container>
                </div>
              </li>
              <li>
                <div class="common-layout">
                  <el-container class="Cfocus">
                    <el-aside width="100px" class='tp'><em>03</em><span class="tSpan">2024.07</span></el-aside>
                    <el-main class="co">

                      <h3>
                        前端前台主页面完成</h3>
                      <img class="yjt" src="../../../assets/b/news-list-ic1.png" alt="">
                      <img class="yjtA" src="../../../assets/b/news-list-ic2.png" alt="">
                    </el-main>
                  </el-container>
                </div>
              </li>
              <li>
                <div class="common-layout">
                  <el-container class="Cfocus">
                    <el-aside width="100px" class='tp'><em>29</em><span class="tSpan">2024.06</span></el-aside>
                    <el-main class="co">

                      <h3>
                        前端前台页面轮播组件完成</h3>
                      <img class="yjt" src="../../../assets/b/news-list-ic1.png" alt="">
                      <img class="yjtA" src="../../../assets/b/news-list-ic2.png" alt="">
                    </el-main>
                  </el-container>
                </div>
              </li>
              <li>
                <div class="common-layout">
                  <el-container class="Cfocus">
                    <el-aside width="100px" class='tp'><em>25</em><span class="tSpan">2024.06</span></el-aside>
                    <el-main class="co">

                      <h3>
                        gitee仓库上传前端ruo-vue和后端ruo-spring框架</h3>
                      <img class="yjt" src="../../../assets/b/news-list-ic1.png" alt="">
                      <img class="yjtA" src="../../../assets/b/news-list-ic2.png" alt="">
                    </el-main>
                  </el-container>
                </div>
              </li>
            </ul>





          </el-col>
          <el-col :span="7" style="margin-left: 52px;" class="bulletin2">

            <div class="b21">
              <div class="shade1">
                <div class="bsd"></div>
              </div>
              <h3 class="bh3">2024</h3>
              <h4 class="bh4">社区工作报告</h4>
              <h5 class="bh5">
                community<br>report

              </h5>
              <img class="cpage" style="width: 327px; " src="../../../assets/b/reportBox-bg.jpg" alt="">

            </div>
          </el-col>
          <el-col :span="7" style="margin-left: -48px; " class="bulletin3">

            <div style="margin-bottom: 3.5px;" class="b22">

              <div class="shade2">
                <div class="bsd"></div>
              </div>

              <h3 class="bh3"><img src="../../../assets/b/fa156adc-ffcc-46f4-adb5-7472e18a93ab.png" alt=""></h3>
              <h4 class="bh4">ANNUAL REPORT</h4>
              <h5 class="bh5">年度报告</h5>

              <img style="width: 417px;" src="../../../assets/b/annualBox-bg.jpg" alt="">
            </div>
            <div>
              <div class="shade3">
                <div class="bsd"></div>
              </div><img style="width: 417px; height: 278px;" src="../../../assets/b/微信图片_20240701180237.png" alt="">
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 业主管理体系 -->
    <div class="owner">
      <div id="ass">
        <h2 style="color: #f6eee3;">
          业主管理体系
        </h2>
        <p>通过企业微信建立物业CRM体系，沉淀运营管理业主资源，挖掘社区业主商业资源</p>
      </div>
      <div class="PropertyRow ">
        <el-row justify="space-evenly" class="pre">
          <el-col :span="5">
            <div class="PropertyRowr">
              <img src="../../../assets/b/team-1.jpg" alt="">
              <h4>业主运营管理</h4>
              <p>
                把业主微信通过企业微信管理，放员工离职带走，并对业主进行标签画像精细化运营
              </p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="PropertyRowr">
              <img src="../../../assets/b/team-2.jpg" alt="">
              <h4>社区商业运营</h4>
              <p>
                业主是最大的商业资源，通过精细化运营业主，可以通过群发 朋友圈方式进行商业运营
              </p>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="PropertyRowr">
              <img src="../../../assets/b/team-3.jpg" alt="">
              <h4>社区舆情监控</h4>
              <p>
                将微信聊天和群聊进行会话存档，并且监控所有聊天记录，做好舆情监督，减少服务纠纷
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="background-color: #fff;width: 100%;height: 62px;margin-top: 136px;"></div>
    <!-- 部分物业管理功能 -->
    <div class="Property">
      <div id="ass">
        <h2>

          部分物业管理功能
        </h2>
        <p>打造高效 安全 智能 又容易商业变现的物业服务系统</p>
      </div>

      <el-row :gutter="200" style="margin-left:0px ;">
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-blue">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                  <path stroke="none" stroke-width="0"
                    d="M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174">
                  </path>
                </svg>
                <svg t="1719934584345" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3360" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M828.8 227.2h-163.2V60.8H192l-3.2 3.2v806.4l70.4 76.8 102.4-112c12.8-12.8 32-12.8 41.6 0l105.6 115.2 105.6-115.2c12.8-12.8 32-12.8 41.6 0l105.6 115.2 67.2-70.4V227.2z m-105.6-134.4v73.6h73.6c-19.2-16-41.6-41.6-73.6-73.6zM128 883.2V64c0-35.2 28.8-64 64-64h502.4c16 0 25.6 6.4 38.4 19.2l137.6 137.6c12.8 12.8 19.2 25.6 19.2 41.6v691.2c0 6.4-3.2 16-9.6 19.2l-96 102.4c-12.8 12.8-32 12.8-41.6 0L636.8 896l-105.6 115.2c-12.8 12.8-32 12.8-41.6 0L384 896l-102.4 112c-12.8 12.8-32 12.8-41.6 0l-96-105.6c-9.6-3.2-16-9.6-16-19.2z m585.6-169.6c16 0 28.8 12.8 28.8 28.8s-12.8 28.8-28.8 28.8H300.8c-16 0-28.8-12.8-28.8-28.8s12.8-28.8 28.8-28.8h412.8z m0-128c16 0 28.8 12.8 28.8 28.8s-12.8 28.8-28.8 28.8H300.8c-16 0-28.8-12.8-28.8-28.8s12.8-28.8 28.8-28.8h412.8z m0-124.8c16 0 28.8 12.8 28.8 28.8s-12.8 28.8-28.8 28.8H300.8c-16 0-28.8-12.8-28.8-28.8s12.8-28.8 28.8-28.8h412.8z m-182.4-124.8c16 0 28.8 12.8 28.8 28.8s-12.8 28.8-28.8 28.8H300.8c-16 0-28.8-12.8-28.8-28.8s12.8-28.8 28.8-28.8h230.4z"
                    p-id="3361" </path>
                </svg>
              </div>
              <h5>在线缴费</h5>

              <p>在线催收物业费 在线缴纳物业费 在线开具物业费发票</p>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-orange ">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">

                  <path stroke="none" stroke-width="0"
                    d="M300,582.0697525312426C382.5290701553225,586.8405444964366,449.9789794690241,525.3245884688669,502.5850820975895,461.55621195738473C556.606425686781,396.0723002908107,615.8543463187945,314.28637112970534,586.6730223649479,234.56875336149918C558.9533121215079,158.8439757836574,454.9685369536778,164.00468322053177,381.49747125262974,130.76875717737553C312.15926192815925,99.40240125094834,248.97055460311594,18.661163978235184,179.8680185752513,50.54337015887873C110.5421016452524,82.52863877960104,119.82277516462835,180.83849132639028,109.12597500060166,256.43424936330496C100.08760227029461,320.3096726198365,92.17705696193138,384.0621239912766,124.79988738764834,439.7174275375508C164.83382741302287,508.01625554203684,220.96474134820875,577.5009287672846,300,582.0697525312426">
                  </path>
                </svg>
                <svg t="1719934707545" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5330" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M864 192H160c-17.67 0-32 14.33-32 32v512c0 17.67 14.33 32 32 32h224l105.37 105.37c6.25 6.25 14.44 9.37 22.63 9.37s16.38-3.12 22.63-9.37L640 768h224c17.67 0 32-14.33 32-32V224c0-17.67-14.33-32-32-32z m-32 512H613.49l-18.74 18.74L512 805.49l-82.74-82.75L410.51 704H192V256h640v448z"
                    p-id="5331"></path>
                  <path
                    d="M320 448h384c17.67 0 32-14.33 32-32s-14.33-32-32-32H320c-17.67 0-32 14.33-32 32s14.33 32 32 32zM320 576h224c17.67 0 32-14.33 32-32s-14.33-32-32-32H320c-17.67 0-32 14.33-32 32s14.33 32 32 32z"
                    p-id="5332"></path>
                </svg>
              </div>
              <h5>消息通知</h5>

              <p>通过短信 微信群发 朋友圈等高效率的方式发送通知</p>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-pink">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">

                  <path stroke="none" stroke-width="0"
                    d="M300,541.5067337569781C382.14930387511276,545.0595476570109,479.8736841581634,548.3450877840088,526.4010558755058,480.5488172755941C571.5218469581645,414.80211281144784,517.5187510058486,332.0715597781072,496.52539010469104,255.14436215662573C477.37192572678356,184.95920475031193,473.57363656557914,105.61284051026155,413.0603344069578,65.22779650032875C343.27470386102294,18.654635553484475,251.2091493199835,5.337323636656869,175.0934190732945,40.62881213300186C97.87086631185822,76.43348514350839,51.98124368387456,156.15599469081315,36.44837278890362,239.84606092416172C21.716077023791087,319.22268207091537,43.775223500013084,401.1760424656574,96.891909868211,461.97329694683043C147.22146801428983,519.5804099606455,223.5754009179313,538.201503339737,300,541.5067337569781">
                  </path>
                </svg>
                <svg t="1719936446506" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="24437" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M352 928h-96c-52.928 0-96-43.072-96-96V224c0-52.928 43.072-96 96-96h96c52.928 0 96 43.072 96 96v608c0 52.928-43.072 96-96 96z m-96-736c-17.632 0-32 14.368-32 32v608c0 17.664 14.368 32 32 32h96c17.632 0 32-14.336 32-32V224c0-17.632-14.368-32-32-32h-96zM768 928h-96c-52.928 0-96-43.072-96-96V448c0-52.928 43.072-96 96-96h96c52.928 0 96 43.072 96 96v384c0 52.928-43.072 96-96 96z m-96-512c-17.664 0-32 14.368-32 32v384c0 17.664 14.336 32 32 32h96c17.664 0 32-14.336 32-32V448c0-17.632-14.336-32-32-32h-96z"
                    p-id="24438"></path>
                </svg>
              </div>
              <h5>业主投票</h5>

              <p>针对各项事务，让业主透过投票参与，提高服务透明度和参与度</p>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-yellow">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">


                  <path stroke="none" stroke-width="0"
                    d="M300,503.46388370962813C374.79870501325706,506.71871716319447,464.8034551963731,527.1746412648533,510.4981551193396,467.86667711651364C555.9287308511215,408.9015244558933,512.6030010748507,327.5744911775523,490.211057578863,256.5855673507754C471.097692560561,195.9906835881958,447.69079081568157,138.11976852964426,395.19560036434837,102.3242989838813C329.3053358748298,57.3949838291264,248.02791733380457,8.279543830951368,175.87071277845988,42.242879143198664C103.41431057327972,76.34704239035025,93.79494320519305,170.9812938413882,81.28167332365135,250.07896920659033C70.17666984294237,320.27484674793965,64.84698225790005,396.69656628748305,111.28512138212992,450.4950937839243C156.20124167950087,502.5303643271138,231.32542653798444,500.4755392045468,300,503.46388370962813">
                  </path>
                </svg>
                <svg t="1719934896041" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="10336" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M276 592l-11.36 124.48A40 40 0 0 0 304 759.52h3.68l124.32-11.52a39.84 39.84 0 0 0 25.28-12l401.6-401.6 50.24-50.24a72 72 0 0 0 0-101.76l-67.2-67.2a72 72 0 0 0-101.76 0l-50.88 50.88L288 566.72a39.84 39.84 0 0 0-12 25.28zM848 232.96L808 272 752 216l39.04-40zM354.24 613.12L694.72 272 752 329.28 410.88 669.76l-62.24 5.6z"
                    p-id="10337"></path>
                  <path
                    d="M896 440a40 40 0 0 0-40 40v376h-688v-688h372a40 40 0 0 0 0-80H162.24a74.4 74.4 0 0 0-74.24 74.24V864a72 72 0 0 0 72 72h704a72.64 72.64 0 0 0 72-72V480a40 40 0 0 0-40-40z"
                    p-id="10338"></path>
                </svg>
              </div>
              <h5>远程抄表</h5>

              <p>减少物业管理工作量，提高水电燃气的抄表效率</p>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="200" style="margin-left:0px ;">
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-red">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">

                  <path stroke="none" stroke-width="0"
                    d="M300,532.3542879108572C369.38199826031484,532.3153073249985,429.10787420159085,491.63046689027357,474.5244479745417,439.17860296908856C522.8885846962883,383.3225815378663,569.1668002868075,314.3205725914397,550.7432151929288,242.7694973846089C532.6665558377875,172.5657663291529,456.2379748765914,142.6223662098291,390.3689995646985,112.34683881706744C326.66090330228417,83.06452184765237,258.84405631176094,53.51806209861945,193.32584062364296,78.48882559362697C121.61183558270385,105.82097193414197,62.805066853699245,167.19869350419734,48.57481801355237,242.6138429142374C34.843463184063346,315.3850353017275,76.69343916112496,383.4422959591041,125.22947124332185,439.3748458443577C170.7312796277747,491.8107796887764,230.57421082200815,532.3932930995766,300,532.3542879108572">
                  </path>
                </svg>
                <svg t="1719935058892" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="19994" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M445.9 6.4c-134.1 0-250.2 116.4-250.2 258.3 0 80 36.2 152.7 98 203.8l18.1 10.8-18.1 7.4C126.6 552 14.5 712.1 14.5 893.8c-0.3 32.9 12.6 64.6 35.8 87.8 23.2 23.3 54.7 36.2 87.6 35.9H468c10.7 0 28.9-10.8 28.9-32.9 0-25.5-18.1-32.9-28.9-32.9H137.4c-15.4 0.2-30.3-5.8-41.2-16.7a56.75 56.75 0 0 1-16.6-41.2c0-193 148.9-352.6 337.4-370.7h39.7c43.5-3.4 105.3-14.8 137.6-43.7l14.8-10.8c61.7-51.1 97.9-123.7 97.9-203.8-0.1-142-116.2-258.4-261.1-258.4z m6.8 451.4c-105.4 0-192.5-87.4-192.5-193s87.2-193 192.5-193c105.4 0 192.6 87.4 192.6 193s-87.2 193-192.6 193z"
                    p-id="19995" </path>
                    <path
                      d="M750.9 500.3c-142.8 0-258.6 115.8-258.6 258.6s115.8 258.6 258.6 258.6 258.6-115.8 258.6-258.6-115.8-258.6-258.6-258.6z m0 460.8c-111.6 0-202.1-90.5-202.1-202.1s90.5-202.1 202.1-202.1S953 647.3 953 758.9s-90.5 202.2-202.1 202.2z"
                      p-id="19996" </path>
                      <path
                        d="M739.3 815.4c-13.2 0-24-10.8-24-24V660.3c0-13.2 10.8-24 24-24s24 10.8 24 24v131.1c0 13.2-10.8 24-24 24z"
                        p-id="19997" </path>
                        <path
                          d="M715.2 791.4c0-13.2 10.8-24 24-24h105c13.2 0 24 10.8 24 24s-10.8 24-24 24h-105c-13.2 0-24-10.8-24-24z"
                          p-id="19998" </path>
                </svg>
              </div>
              <h5>临时访客管理</h5>

              <p>针对来访客人的管理，生产临时二维码，提高社区安全性</p>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-teal">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                  <path stroke="none" stroke-width="0"
                    d="M300,566.797414625762C385.7384707136149,576.1784315230908,478.7894351017131,552.8928747891023,531.9192734346935,484.94944893311C584.6109503024035,417.5663521118492,582.489472248146,322.67544863468447,553.9536738515405,242.03673114598146C529.1557734026468,171.96086150256528,465.24506316201064,127.66468636344209,395.9583748389544,100.7403814666027C334.2173773831606,76.7482773500951,269.4350130405921,84.62216499799875,207.1952322260088,107.2889140133804C132.92018162631612,134.33871894543012,41.79353780512637,160.00259165414826,22.644507872594943,236.69541883565114C3.319112789854554,314.0945973066697,72.72355303640163,379.243833228382,124.04198916343866,440.3218312028393C172.9286146004772,498.5055451809895,224.45579914871206,558.5317968840102,300,566.797414625762">
                  </path>
                </svg>
                <svg t="1719935139958" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="21033" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M108.088889 142.222222A91.022222 91.022222 0 0 1 199.111111 51.2h625.777778a91.022222 91.022222 0 0 1 91.022222 91.022222V568.888889c-6.599111 38.343111-61.667556 38.343111-68.266667 0V142.222222a22.755556 22.755556 0 0 0-22.755555-22.755555h-625.777778a22.755556 22.755556 0 0 0-22.755555 22.755555v739.555556c0 12.515556 10.24 22.755556 22.755555 22.755555H512c37.319111 7.452444 37.319111 60.814222 0 68.266667H199.111111a91.022222 91.022222 0 0 1-91.022222-91.022222v-739.555556z"
                    p-id="21034"></path>
                  <path
                    d="M910.222222 785.066667V910.222222h-284.444444v-125.155555h284.444444z m-341.333333-45.511111v227.555555h398.222222v-227.555555h-398.222222z"
                    p-id="21035"></path>
                  <path
                    d="M661.390222 671.288889h213.219556L910.222222 739.555556h-284.444444l35.612444-68.266667z m239.331556-45.511111h-265.443556L568.888889 739.555556v56.888888h398.222222v-56.888888l-66.389333-113.777778z"
                    p-id="21036"></path>
                  <path
                    d="M768 631.466667a22.755556 22.755556 0 0 0-22.755556 22.755555v113.777778a22.755556 22.755556 0 0 0 45.511112 0v-113.777778a22.755556 22.755556 0 0 0-22.755556-22.755555zM227.555556 258.844444A31.288889 31.288889 0 0 1 258.844444 227.555556h506.311112a31.288889 31.288889 0 1 1 0 62.577777h-506.311112A31.288889 31.288889 0 0 1 227.555556 258.844444zM227.555556 429.511111A31.288889 31.288889 0 0 1 258.844444 398.222222h392.533334a31.288889 31.288889 0 1 1 0 62.577778h-392.533334A31.288889 31.288889 0 0 1 227.555556 429.511111z"
                    p-id="21037"></path>
                </svg>
              </div>
              <h5>快递管理</h5>

              <p>在线催收物业费 在线缴纳物业费 在线开具物业费发票</p>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-red">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                  <path stroke="none" stroke-width="0"
                    d="M300,532.3542879108572C369.38199826031484,532.3153073249985,429.10787420159085,491.63046689027357,474.5244479745417,439.17860296908856C522.8885846962883,383.3225815378663,569.1668002868075,314.3205725914397,550.7432151929288,242.7694973846089C532.6665558377875,172.5657663291529,456.2379748765914,142.6223662098291,390.3689995646985,112.34683881706744C326.66090330228417,83.06452184765237,258.84405631176094,53.51806209861945,193.32584062364296,78.48882559362697C121.61183558270385,105.82097193414197,62.805066853699245,167.19869350419734,48.57481801355237,242.6138429142374C34.843463184063346,315.3850353017275,76.69343916112496,383.4422959591041,125.22947124332185,439.3748458443577C170.7312796277747,491.8107796887764,230.57421082200815,532.3932930995766,300,532.3542879108572">
                  </path>
                </svg>
                <svg t="1719935183369" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="22132" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M634.51 166.28l269.35 269.35c27.23 27.23 27.23 71.33 0 98.46l-279.1 279.08c-0.56 0.56-0.16 1.53 0.63 1.53h270.57c17.64 0 31.93 14.3 31.93 31.93 0 17.4-14.11 31.51-31.51 31.51H127.56c-16.98 0-30.75-13.77-30.75-30.75v-1.04c0-17.48 14.17-31.66 31.66-31.66h112.48c0.79 0 1.19-0.95 0.64-1.52L115.77 683.42c-26.54-27.33-26.14-70.83 0.7-97.76l419.48-419.38c27.23-27.24 71.33-27.24 98.56 0z m-29.23 60.55l-84.39 320.32a66.41 66.41 0 0 1-41.9 45.69l-5.69 1.8-281.95 73.64c-0.66 0.17-0.89 0.99-0.42 1.48l138.15 145.47c0.17 0.18 0.4 0.28 0.65 0.28l206.04-0.4c0.24 0 0.47-0.1 0.63-0.26l322.65-325.54a6.09 6.09 0 0 0 1.14-7 0.864 0.864 0 0 0-0.1-0.16l-1.1-1.47c-0.03-0.03-0.05-0.07-0.08-0.1L605.28 226.83z m-74.72 34.62L191.02 600.99c-0.64 0.64-0.02 1.73 0.86 1.5l265.46-69.3c0.7-0.2 1.3-0.6 1.7-1.2l0.46-0.91c0.03-0.05 0.05-0.11 0.06-0.17l71-269.46z"
                    p-id="22133"></path>
                </svg>
              </div>
              <h5>投诉建议</h5>

              <p>线上提交投诉及建议，提高业主满意度，多种派单处理方式提高效率</p>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="PropertyCol">
            <div class="icon-box iconbox-teal">
              <div class="icon">
                <svg class="psvgS" width="100" height="100" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
                  <path stroke="none" stroke-width="0"
                    d="M300,566.797414625762C385.7384707136149,576.1784315230908,478.7894351017131,552.8928747891023,531.9192734346935,484.94944893311C584.6109503024035,417.5663521118492,582.489472248146,322.67544863468447,553.9536738515405,242.03673114598146C529.1557734026468,171.96086150256528,465.24506316201064,127.66468636344209,395.9583748389544,100.7403814666027C334.2173773831606,76.7482773500951,269.4350130405921,84.62216499799875,207.1952322260088,107.2889140133804C132.92018162631612,134.33871894543012,41.79353780512637,160.00259165414826,22.644507872594943,236.69541883565114C3.319112789854554,314.0945973066697,72.72355303640163,379.243833228382,124.04198916343866,440.3218312028393C172.9286146004772,498.5055451809895,224.45579914871206,558.5317968840102,300,566.797414625762">
                  </path>
                </svg>
                <svg t="1719935227037" class="PSvg" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="23352" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
                  height="200">
                  <path
                    d="M827.2896 307.712l22.8352 22.016h76.9536c25.2416 0 45.7216 20.0704 45.7216 45.0048v543.0272c0 24.7808-20.992 44.9536-45.7216 44.9536H96.9216a46.3872 46.3872 0 0 1-32.4096-13.2096 44.1344 44.1344 0 0 1-13.312-31.744V374.7328c0-24.832 20.992-44.9536 45.7216-44.9536h555.6224l25.4464-22.0672h149.2992zM880.64 419.6864H143.36v453.12h737.28v-453.12z m-545.3824 98.816v102.7584H235.1104v-102.7584h100.1472z m204.8 0v102.7584H439.9104v-102.7584h100.1472z m209.7152-349.0816c39.3216 0 77.9264 12.6464 115.2 37.0688l11.1616 7.68-47.9232 66.4064c-27.4944-19.8656-53.4528-29.184-78.4384-29.184-22.2208 0-45.1584 7.3728-69.3248 22.9376l-9.1136 6.2464-47.9232-66.4064c40.7552-29.44 83.0976-44.7488 126.3616-44.7488z m0-153.4464c72.192 0 143.5648 23.7056 213.8112 70.2976l15.0016 10.2912-47.4624 66.7648c-61.8496-44.032-122.112-65.4336-181.3504-65.4336-54.9888 0-110.6432 18.432-167.5264 56.32l-13.1584 9.0624-47.616-66.6112C596.0704 43.2128 672.4096 15.9744 749.7728 15.9744z"
                    p-id="23353"></path>
                </svg>
              </div>
              <h5>智慧巡检</h5>

              <p>实现巡检工作的无纸化 智能化，提高巡检工作效率</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 联系我 -->

    <div style="clear:both;padding-top: 60px;background-color: #fff;"></div>

    <section id="cta" class="cta">
      <div class="linkedContainer">

        <div class="row">
          <div class="col-lg-9 text-center text-lg-start">
            <h3>建设智能化便捷化的智慧社区</h3>
            <p> 专业智慧社区 智慧小区 物业管理系统 社区O2O系统软件平台开发,功能涵盖蓝牙开门,人脸门禁,物业管理,物业OA,社区团购,社区商业,生活
              缴费等功能</p>
          </div>
          <div class="col-lg-3 cta-btn-container text-center">
            <a class="popups cta-btn align-middle" href="#">联系我们</a>
          </div>
        </div>

      </div>
    </section>
    <div style="width: 100%;height: 32px;background-color:#5cb874 ;"></div>

    <!-- 智能硬件组件物联网 -->


    <div id="ass" style="background-color: #fff;padding-top: 104px;">
      <h2>

        智能硬件组建物联网
      </h2>
      <p>将各种智能硬件组成统一的物联网，一个平台管理所有设备</p>
    </div>
    <div id="ic" class="ic" style="margin-bottom: -40px;"> <el-row :gutter="200">
        <el-col :span="8">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
            <path
              d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z" />
          </svg>
          <h3 class="sh"><a href="/Transit">刷脸门禁</a></h3>
          <span class="ss">人脸识别 快捷进入 方便高效</span>
        </el-col>
        <el-col :span="8">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
          </svg>
          <h3 class="sh"><a>停车场系统</a></h3>
          <span class="ss">月租车和临时车在线收费管理</span>
        </el-col>
        <el-col :span="8">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z" />
            <path
              d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z" />
            <path
              d="M10 7a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7Zm-6 4a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm4-3a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1Z" />
          </svg>
          <h3 class="sh"><a>智能快递柜</a></h3>
          <span class="ss">在线智能收发快递 方便业主</span>
        </el-col>

      </el-row></div>

    <div id="ic" class="ic" style="padding-bottom: 310px;"> <el-row :gutter="200">
        <el-col :span="8">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z" />
            <path
              d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
          </svg>
          <h3 class="sh"><a>充电桩</a></h3>
          <span class="ss">电动车充电管理与收费管理</span>
        </el-col>
        <el-col :span="8">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path fill-rule="evenodd"
              d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207l-5-5-5 5V13.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7.207Z" />
          </svg>
          <h3 class="sh"><a>身份梯控</a></h3>
          <span class="ss">通过刷卡等身份认证方式控制电梯</span>
        </el-col>
        <el-col :span="8">

          <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 16 16">
            <path
              d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z" />
            <path
              d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
          </svg>

          <h3 class="sh"><a>智能摄像头</a></h3>
          <span class="ss">高空抛物识别 人脸走失识别</span>
        </el-col>

      </el-row></div>

    <!-- 底部 -->
    <footer id="footer">
      <div class="footercontainer">

        <div class="footercopyright">
          ©2024 Copyright <strong><span>906~710宿舍 张柏焰 熊金平 严伟程 徐志良 林锦耀 吴宝杰</span></strong>. All Rights Reserved <a
            target="_blank"></a>
        </div>


      </div>
    </footer>


</template>
<script>
import SvgIcon from './../../../components/SvgIcon/index.vue'
import { getInfo, logout } from "@/api/login";

export default {
  ata() {
    return {


      form: {},

    };
  },
  components: { SvgIcon },
  methods: {

  },
  mounted() {


    (function () {
      let cpage = document.querySelector('.b21')
      cpage.addEventListener('click', function () {

        window.location.href = '/announcementPage'
      })
      let lunbo = document.querySelector('.lunbo');
      lunbo.addEventListener('click', function () {
        window.location.href = '/audit'
      })

      let lianxi = document.querySelector('.lianxi');
      lianxi.addEventListener('click', function () {
        alert('张柏焰 18157906621')
      })

      //跳转index
      let PropertyRowr = document.querySelectorAll('.PropertyRowr img')
      PropertyRowr.forEach(item => {
        item.addEventListener('click', () => {
          window.location.href = '/index'
        })
      })
      let useridName = document.querySelector('#useridName')
      let homeUser = document.querySelector('.homeUser')
      useridName.addEventListener('click', function () {
        logout()
        let homeLogin = document.querySelector('.homeLogin')
        let homeLogo = document.querySelector('.homeLogo')

        let lianxi = document.querySelector('.lianxi')
        homeLogin.style.display = 'inline-block'
        homeLogo.style.display = homeUser.style.display = 'none'
        lianxi.style.marginRight = 0
        alert('已注销')

        // window.location.href = '/index'


      })
      useridName.addEventListener('mouseover', function () {
        useridName.innerHTML = '注销'
        homeUser.style.right = '76px'
      })
      useridName.addEventListener('mouseout', function () {
        getInfo().then((res) => {
          let useridName = document.querySelector('#useridName')
          console.log(useridName);
          useridName.innerHTML = res.user.userName

          homeUser.style.right = '60px'
        })
      })

      // 用户名获取
      getInfo().then((res) => {
        let useridName = document.querySelector('#useridName')
        console.log(useridName);
        useridName.innerHTML = res.user.userName

      })
      // 导航栏点击
      let navLink = document.querySelectorAll('.nav-link')
      navLink[1].addEventListener('click', function () {

        document.documentElement.scrollTop = 730
      })
      navLink[2].addEventListener('click', function () {

        document.documentElement.scrollTop = 1390
      })
      navLink[3].addEventListener('click', function () {

        document.documentElement.scrollTop = 2100
      })
      navLink[4].addEventListener('click', function () {

        document.documentElement.scrollTop = 4100
      })

      // 轮播模块
      let items = document.getElementsByClassName("item");
      let circles = document.getElementsByClassName("circle");
      let leftBtn = document.getElementById("btn-left");
      let rightBtn = document.getElementById("btn-right");
      let content = document.querySelector('.content');
      let index = 0;
      let timer = null;
      // 轮播前面标题效果
      let e_container = document.querySelectorAll('.e_container')
      let fadeInDown = document.querySelectorAll('.fadeInDown')
      let fadeInUp = document.querySelectorAll('.fadeInUp')
      let f_btn = document.querySelectorAll('.f_btn')


      function e_c(index) {
        // 获取所有带有 'ecActive' 类的元素
        let ecActives = document.querySelectorAll('.ecActive');

        // 遍历 NodeList 并从每个元素中移除 'ecActive' 类
        ecActives.forEach(function (element) {
          element.classList.remove('ecActive');
        });
        let fID = document.querySelectorAll('.fID')
        // 遍历 NodeList 并从每个元素中移除 'fID' 类
        fID.forEach(function (element) {
          element.classList.remove('fID');
        });

        let fIU = document.querySelectorAll('.fIU')
        // 遍历 NodeList 并从每个元素中移除 'fIU' 类
        fIU.forEach(function (element) {
          element.classList.remove('fIU');
        });
        e_container[index].classList.add('ecActive');
        fadeInDown[index].classList.add('fID')

        fadeInUp[index].classList.add('fIU')
        fadeInUp.forEach(function (element) {
          element.style.opacity = '0';
        });

        let i = 0;
        const timer = setTimeout(function () {

          fadeInUp[index].style.opacity = '1';
          i++
          if (i == 1) {
            clearTimeout(timer);
          }
        }, 1000);
        let fB = document.querySelectorAll('.fB')
        //遍历NodeList 并从每个元素中移除 'fB' 类
        fB.forEach(function (element) {
          element.classList.remove('fB');
        });
        f_btn[index].classList.add('fB')
        f_btn.forEach(function (element) {
          element.style.opacity = '0';
        });
        const t = setTimeout(function () {
          f_btn[index].style.opacity = '1'
        }, 1000);
      }
      e_c(0)
      //清除class
      let clearclass = function () {
        for (let i = 0; i < items.length; i++) {
          items[i].className = "item";
          circles[i].className = "circle";
          circles[i].setAttribute("num", i);
        }
      }
      /*只显示一个class*/
      function move() {
        clearclass();
        items[index].className = "item active";
        circles[index].className = "circle white";
      }
      //点击右边按钮切换下一张图片
      rightBtn.onclick = function () {
        index = (index + 1) % items.length;

        e_c(index)
        move();
      };
      //点击左边按钮切换上一张图片
      leftBtn.onclick = function () {
        index = (index - 1 + items.length) % items.length;
        e_c(index)
        move();
      };
      //开始定时器，点击右边按钮，实现轮播
      timer = setInterval(function () {
        rightBtn.onclick();
      }, 5000)
      //点击圆点时，跳转到对应图片
      for (let i = 0; i < circles.length; i++) {
        circles[i].addEventListener("click", function () {
          let point_index = this.getAttribute("num");
          index = point_index;
          e_c(index)
          move();
        })

      }

      //初始化轮播图，使页面加载完成后立即显示第一张图片和对应的圆点状态
      move()
    }())


      //公告模块的js 代码
      (function () {
        let b3 = document.querySelector('#b3');
        let bulletin1 = document.querySelector('.bulletin1');
        let bulletin2 = document.querySelector('.bulletin2');
        let bulletin3 = document.querySelector('.bulletin3');
        let backarrow = document.querySelector('.back-arrow');
        backarrow.addEventListener('click', function () {
          document.documentElement.scrollTop = 0
        })
        window.addEventListener('scroll', function () {
          const n = document.documentElement.scrollTop
          if (n >= b3.offsetTop) {
            bulletin1.classList.add('buActive')
            const t = setTimeout(() => {
              bulletin2.classList.add('buActive')
            }, 200)
            const k = setTimeout(() => {
              bulletin3.classList.add('buActive')
            }, 400)


          }

          if (n < b3.offsetTop - 100) {
            bulletin1.classList.remove('buActive')
            const t = setTimeout(() => {
              bulletin2.classList.remove('buActive')
            }, 200)
            const k = setTimeout(() => {
              bulletin3.classList.remove('buActive')
            }, 400)


          }
          if (n > 100) {
            backarrow.style.opacity = 1
          } else {
            backarrow.style.opacity = 0
          }
        })

        let tSpans = document.querySelectorAll('.tSpan')
        let tps = document.querySelectorAll('.tp')
        let ems = document.querySelectorAll('em')
        let Cfocus = document.querySelectorAll('.Cfocus')
        let yjt = document.querySelectorAll('.yjt')
        let yjtA = document.querySelectorAll('.yjtA')
        for (let i = 0; i < Cfocus.length; i++) {
          Cfocus[i].addEventListener('mouseover', function (e) {
            yjt[i].classList.add('active')
            yjtA[i].classList.add('active')
            ems[i + 1].classList.add('emA')
            tps[i + 1].classList.add('tpA')
            tSpans[i + 1].classList.add('tSpanA')


          })
        }
        for (let i = 0; i < Cfocus.length; i++) {
          Cfocus[i].addEventListener('mouseout', function (e) {
            yjt[i].classList.remove('active')
            yjtA[i].classList.remove('active')
            ems[i + 1].classList.remove('emA')
            tps[i + 1].classList.remove('tpA')
            tSpans[i + 1].classList.remove('tSpanA')
          })
        }
        let bsds = document.querySelectorAll('.bsd')
        for (let i = 1; i <= 3; i++) {
          let shade = document.querySelector('.shade' + i)
          shade.addEventListener('mouseover', function (e) {
            e.stopPropagation(); // 阻止事件冒泡，防止子元素的mouseover影响父元素
            this.style.opacity = 1;
            bsds[i - 1].style.top = '46%'
            bsds[i - 1].addEventListener('mouseover', function (e) {
              e.target.style.top = '45.6%'
              e.stopPropagation();
            })
          });

          shade.addEventListener('mouseout', function (e) {
            // 添加条件检查，确保mouseout仅在鼠标离开.shade及其子元素时触发
            if (!this.contains(e.relatedTarget)) {
              this.style.opacity = 0;
              bsds[i - 1].style.top = '56%'

            }
          });
        }

        // 物业功能模块焦点事件

        let icons = document.querySelectorAll('.icon-box')
        let PSvg = document.querySelectorAll('.PSvg')
        let psvgS = document.querySelectorAll('.psvgS')
        //在线缴费转
        icons[0].addEventListener('click', function (e) {
          // e.stopPropagation(); // 阻止事件冒泡，防止子元素的mouseover影响父元素
          window.location.href = '/personnel/payFee'
        })
        console.log(icons);
        const icolors = ['#47aeff', '#ffa76e', '#e80368', '#ffbb2c', '#ff5828', '#11dbcf', '#ff5828', '#11dbcf']
        for (let i = 0; i < icons.length; i++) {
          PSvg[i].style.fill = icolors[i]
          icons[i].addEventListener('mouseover', function (e) {
            e.stopPropagation(); // 阻止事件冒泡，防止子元素的mouseover影响父元素
            PSvg[i].style.fill = '#fff'
            psvgS[i].style.fill = icolors[i]
          })
          icons[i].addEventListener('mouseout', function (e) {
            e.stopPropagation(); // 阻止事件冒泡，防止子元素的mouseover影响父元素
            PSvg[i].style.fill = icolors[i]
            psvgS[i].style.fill = '#f5f5f5'
          })

        }

      }())


  }


}



</script>



<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  color: #444444;

}

@font-face {
  font-family: "创粗黑";
  src: url('../../../assets/font/字魂创粗黑.ttf');
}

.useridName {
  font-weight: 550;
}

#header {
  background-color: #fff;
  z-index: 997;
  height: 70px;
  position: fixed;
  width: 100%;
  overflow: hidden;
  padding: 13.75px 98px;
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  /* font-weight: 700; */
  letter-spacing: 1px;
  text-transform: uppercase;
}

#header .logo img {
  width: 36px;
}

@font-face {
  font-family: "字小魂印章体";
  src: url('../../../assets/font/字小魂印章体.ttf');

}

#header .logo span {
  font-family: "字小魂印章体";
  position: relative;
  top: -10px;
  left: 14px;
}

.navbar {
  float: inline-end;

}

.navbar ul {
  list-style-type: none;
}

.navbar ul li {
  display: inline-block;
  /* margin-left: 3px; */
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  color: #222222;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar .getstarted {
  color: #5cb874;
  padding: 8px 25px;
  margin-left: 30px;
  border-radius: 4px;
  border: 2px solid #5cb874;
  transition: 0.3s;
  font-size: 14px;
}

.navbar .getstarted:hover {
  background-color: #5cb874;
  color: #fff;
}

.navbar .nav-link:hover {

  color: #5cb874;
}



/* 轮播 */
a {
  list-style: none;
}

li {
  list-style: none;
}

.lunbo {
  width: 100%;
  height: 69.9%;

  overflow: hidden;
}

.content {
  width: 100%;
  height: 100%;

  position: relative;
}

#item {
  width: 100%;
  height: 100%;

}

.item {
  position: absolute;
  opacity: 0;
  transition: all 1s;

}

.item.active {
  opacity: 1;
}

img {
  width: 100%;
}

#btn-left {
  border-radius: 50px;
  width: 54px;
  height: 54px;
  font-size: 30px;
  line-height: 48px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.2);

  padding-left: 15px;
  z-index: 10;
  /*始终显示在图片的上层*/
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-60%);
  /*使按钮向上偏移居中对齐*/
  cursor: pointer;
  transition: all 0.4s;
}



#btn-right {
  border-radius: 50px;
  width: 54px;
  height: 54px;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.2);
  line-height: 48px;
  padding-left: 15px;
  z-index: 10;
  position: absolute;
  right: 10px;
  top: 50%;
  cursor: pointer;
  transition: all 0.4s;
  transform: translateY(-60%);
}

#btn-left:hover {

  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.4);
}

#btn-right:hover {

  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.4);
}

#circle {
  z-index: 10;
  height: 20px;
  display: flex;
  position: absolute;
  top: 96%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle {
  margin: 3px;
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  opacity: .6;
  transition: 0.3s;
}

.white {
  background-color: #5cb874;
}

.bColor {
  background-color: rgba(45, 103, 60, 0.8);
  position: absolute;
  height: 69.9%;
  width: 100%;
  z-index: 6;
}

.e_container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 50px;
  right: 50px;
  opacity: 0;

}

.effect_container {
  text-align: center;

}



.effect_container .fadeInDown {
  color: #fff;
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 700;


}



.effect_container .fID {
  animation-duration: 1s;
  animation-name: fid;

}

@keyframes fid {
  from {
    position: relative;
    top: -50px;

  }

  to {
    position: relative;
    top: 0;


  }
}



.effect_container .fadeInUp {
  animation-delay: 0.4s;
  margin: 0 auto 30px auto;
  color: #fff;
  opacity: 0;
}

.effect_container .fIU {
  animation-duration: 1s;
  animation-name: fiu;

}

@keyframes fiu {
  0% {
    opacity: 0;

    position: relative;
    top: 20px;
  }



  100% {
    opacity: 1;
    position: relative;
    top: 0;
  }
}



.effect_container .f_btn {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  transition: 0.5s;
  line-height: 1;
  color: #fff;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  background: #5cb874;
  opacity: 0;
}

.effect_container .fB {
  animation-duration: 1s;
  animation-name: fb;

}

@keyframes fb {
  from {
    opacity: 0;
    position: relative;
    top: 40px;


  }

  to {
    opacity: 1;
    position: relative;
    top: 0px;


  }
}

.ecActive {
  opacity: 1;
}


.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;

}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.ic {
  width: 100%;
  height: 33%;
  background-color: #f8fcf9;
  padding: 54px 120px 0 120px;
  /* margin-bottom: 32px; */
}

.svg {
  fill: #5cb874;
  width: 44px;
  height: 42px;
}

.sh {
  color: #222222;
  transition: 0.3s;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
  line-height: 1.2;
  margin-top: 20px;

}

.sh:hover {
  color: #5cb874;
}


.ss {
  line-height: 24px;
  font-size: 14px;
}

.cte {
  background-color: #fff;
  padding: 0 6%;
  padding-top: 32px;
  padding-bottom: 5px;
}

#ass {
  font-family: "Raleway", sans-serif;
  text-align: center;

  padding-bottom: 30px;

}

#ass h2 {
  /* line-height: 100px; */
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;

}

#ass h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}


#ass h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #5cb874;
  bottom: 0;
  left: calc(50% - 20px);
}

#ass p {
  margin-bottom: 0;
  font-size: 14px;
  color: #919191;
}

.fjx {
  width: 100%;
  height: 100px;
  background-color: #5cb874;
}

.row {
  overflow: hidden;

}

.content-item {
  padding: 40px;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin: -1px;
}

@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
}

/* @media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
} */


.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y)* -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

.content-item span {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: #6ec083;
}

.content-item h4 {
  font-size: 26px;
  font-weight: 300;
  padding: 0;
  margin: 20px 0;
}

.content-item p {
  color: #aaaaaa;
  font-size: 15px;
  margin: 0;
  padding: 0;
}

.client {
  background-color: #fff;
  padding: 60px 0;
}

.client .ct {

  height: 516px;
  width: 100%;
  padding: 0 6.8%;
  overflow: hidden;
  background-image: url(../../../assets/b/index-cont1-brx.png);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: 29%;


}

.el-row {
  margin-bottom: 20px;

}

.el-row:last-child {
  margin-bottom: 0;
}



.grid-content {

  min-height: 36px;
}

@font-face {
  font-family: "Rajdhani";
  src: url('../../../assets/font/Rajdhani-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}

em {
  display: block;
  color: #b4a48a;
  font-size: 60px;
  line-height: 42px;
  height: 48px;
  font-family: Rajdhani;
  letter-spacing: -3px;
  margin-top: 5px;
  font-style: normal;

}

.time {
  /* float: left; */
  width: 23.4%;
  height: 150px;
  background: url(../../../assets/time/time_bg.png) no-repeat 0 0;
  padding: 10px 0 0 13px;
  background-size: 100%;
}


.common-layout h3 {
  color: #59504c;
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 18px;
  /* -webkit-line-clamp: 2; */
}


.common-layout p {
  color: rgba(60, 60, 72, .7);
  line-height: 24px;
  /* -webkit-line-clamp: 4; */
  overflow: hidden;
  height: 96px;
}

.common-layout .tp {
  padding: 12px;
  margin-right: 18px;
  background-color: #ffffff00;
  background-image: url(../../../assets/time/time_bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.common-layout .tp .tSpan {
  display: block;
  color: #e40000;
  font-size: 18px;
  line-height: 14px;
  font-family: Rajdhani;

}





.timeli {
  /* float: left; */
  width: 85px;
  height: 46px;
  position: relative;
  transition: all .4s;
}

.timeli:before {
  content: "";
  border-right: 2px solid #d9d9d9;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  transition: all .4s;
}

.tli em {
  display: block;
  color: #b4a48a;
  font-size: 47px;
  line-height: 33px;
  font-family: Rajdhani;
  margin-bottom: -16px;
  letter-spacing: -2px;
  transition: all .4s;
}

.tli span {
  display: block;
  color: #b4a48a;
  font-size: 18px;
  /* line-height: 4px; */
  font-family: Rajdhani;
  transition: all .4s;
}


.uf li:nth-child(2) h3,
.uf li:nth-child(3) h3,
.uf li:nth-child(4) h3,
.uf li:nth-child(5) h3 {
  color: rgba(60, 60, 72, .7);
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 7px;
  margin-top: -2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;

}

.uf li:nth-child(2) .tp,
.uf li:nth-child(3) .tp,
.uf li:nth-child(4) .tp,
.uf li:nth-child(5) .tp {
  overflow: hidden;
  padding: 16px;
  padding-left: 0px;
  height: 80px;

  position: relative;

  transition: all .25s cubic-bezier(.17, .67, .69, .85);
  z-index: 1;
  background-image: none;
  overflow: visible
}




.uf li:nth-child(2) .tp:before,
.uf li:nth-child(3) .tp:before,
.uf li:nth-child(4) .tp:before,
.uf li:nth-child(5) .tp:before {
  content: "";
  border-right: 2px solid #d9d9d9;
  position: absolute;
  right: 17px;
  top: 16;
  height: 50%;

  transition: all .4s;
}

.uf li:nth-child(2) .tpA::before,
.uf li:nth-child(3) .tpA::before,
.uf li:nth-child(4) .tpA::before,
.uf li:nth-child(5) .tpA::before {
  height: 0;
}


.uf li:nth-child(2) em,
.uf li:nth-child(3) em,
.uf li:nth-child(4) em,
.uf li:nth-child(5) em {
  display: block;
  color: #b4a48a;
  font-size: 47px;
  line-height: 33px;
  font-family: Rajdhani;
  margin-bottom: 4px;
  letter-spacing: -2px;
  transition: all .4s;
  margin-bottom: -10px;

}

.uf li:nth-child(2) .emA,
.uf li:nth-child(3) .emA,
.uf li:nth-child(4) .emA,
.uf li:nth-child(5) .emA {
  color: #e10700;
  ;
}

.uf li:nth-child(2) .co,
.uf li:nth-child(3) .co,
.uf li:nth-child(4) .co,
.uf li:nth-child(5) .co {
  padding: 16px 0;
  overflow: hidden;
}

.uf li:nth-child(2) .tSpan,
.uf li:nth-child(3) .tSpan,
.uf li:nth-child(4) .tSpan,
.uf li:nth-child(5) .tSpan {
  color: #b4a48a;

}

.uf li:nth-child(2) .tSpanA,
.uf li:nth-child(3) .tSpanA,
.uf li:nth-child(4) .tSpanA,
.uf li:nth-child(5) .tSpanA {
  color: #515151;

}

.uf li {
  border-bottom: 3px solid #f9f4ed;
  /* padding: 16px 0; */
}



.common-layout .yjtA {
  content: "";
  height: 14px;
  position: relative;
  left: 90%;
  top: -14px;
  bottom: 0;
  margin: auto;
  transition: all .4s;
  width: 21px;

  opacity: 0;
  transform: translateX(-40px);
}

.Cfocus {
  cursor: pointer;
}

.Cfocus .yjtA.active {
  left: 102%;
  opacity: 1;
}




.common-layout .yjt {

  content: "";
  height: 14px;
  position: relative;

  left: 97%;
  top: -14px;
  bottom: 0;
  margin: auto;
  transition: all .4s;
  width: 8px;
  opacity: 1;
}


.Cfocus .yjt.active {
  left: 100%;
  opacity: 0;
}



.bgbg {
  height: 100%;
  position: fixed;
  z-index: -1;

}

.bulletin1,
.bulletin2,
.bulletin3 {
  position: relative;
  top: 516px;
  opacity: 0;
  transition: all 1s;
}

.buActive {
  animation: buA 1s cubic-bezier(0.3, 0.7, 0.8, 1);
  top: 0px;
  opacity: 1;
}

@keyframes buA {
  from {
    opacity: 0;
    top: 516px;
  }

  to {
    opacity: 1;
    top: 0px;
  }
}

.shade1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 327px;
  height: 514px;
  z-index: 5;
  opacity: 0;
  background: rgba(0, 0, 0, .8);
  transition: all .4s;
}

.shade2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 417px;
  height: 229px;
  z-index: 5;
  opacity: 0;
  background: rgba(0, 0, 0, .8);
  transition: all .4s;
}

.shade3 {
  position: absolute;
  left: 0;
  top: 237px;
  width: 417px;
  height: 278px;
  z-index: 5;
  opacity: 0;
  background: rgba(0, 0, 0, .8);
  transition: all .4s;
}

@font-face {
  font-family: "FSSinclair-Bold";
  src: url('../../../assets/font/FSSinclair-Bold.ttf');
}

.b21 .bh3 {
  position: absolute;
  color: rgba(180, 173, 144, .6);
  font-size: 48px;
  height: 46px;
  line-height: 36px;
  font-family: Rajdhani;
  margin-top: 273px;
  left: 50px;
  letter-spacing: -2px;
  font-weight: 300;
}

.b21 .bh4 {
  position: absolute;
  top: 316px;
  left: 50px;
  color: #b4ad90;
  font-size: 24px;
  line-height: 1;
}

.b21 .bh5 {
  position: absolute;
  color: rgba(180, 173, 144, .4);
  top: 342px;
  left: 50px;
  font-size: 24px;
  line-height: 22px;
  font-family: "FSSinclair-Bold";
  text-transform: uppercase;
  letter-spacing: -1px;
}

.b22 .bh3 {
  position: absolute;
  color: #567e72;
  top: 88px;
  font-family: Rajdhani;
  letter-spacing: -2px;
  font-weight: 300;
  left: 200px;
}

.b22 .bh3 img {
  display: block;
  border: 0 none;
  max-width: 100%;
  width: 171px;
  height: 46px;

}

.b22 .bh4 {
  position: absolute;
  color: #667d5e;
  top: 133px;
  font-size: 24px;
  line-height: 27px;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-family: "FSSinclair-Bold";
  margin-bottom: 2px;
  left: 200px;
}

.b22 .bh5 {
  position: absolute;
  color: #667d5e;
  font-size: 24px;
  line-height: 1;
  top: 161px;
  left: 200px;
}

.bsd {



  position: absolute;
  left: 50%;
  top: 56%;
  width: 46px;
  transform: translateY(20px);
  transition: inherit;
  height: 46px;
  /* border: 2px solid #fff; */
  margin: -23px 0 0 -23px;
  /* border-radius: 50%; */

  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff no-repeat 50%;
  background: url('../../../assets/b/695b55a523a27e6fff1193fde14389e.png');
  background-size: 100%;
  cursor: pointer;
}

.bsd:hover {
  left: 49.2%;
  top: 100%;
  width: 54px;
  height: 54px;
  background: url('../../../assets/b/a39a549338785956e88ac723c56ad13.png');
  background-size: 100%;
}

.owner {
  margin-top: 32px;
}


.PropertyRowr {
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0px 0px 12px 0px rgba(34, 34, 34, 0.07);
  padding: 30px 20px;
  background: #fff;
  width: 416px;
  height: 410px;
  position: relative;
  left: -48px;
}



.PropertyRowr img {
  max-width: 60%;
  border-radius: 50%;
  margin: 0 0 30px 0;
  cursor: pointer;
}

.PropertyRowr h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.PropertyRowr p {
  padding-top: 10px;
  font-size: 14px;
  color: #aaaaaa;
}




#footer {
  background: #090909;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

.footercopyright,
.footercopyright span {
  color: #fff;
}

.Property {
  background-color: #fff;
  width: 100%;
  overflow: hidden;

}

.PropertyCol .icon-box {
  text-align: center;
  padding: 70px 20px 80px 20px;
  transition: all ease-in-out 0.3s;
  background: #fff;
  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);
  width: 308px;
  height: 329px;

}

.PropertyCol .icon-box .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;

}




.PSvg {
  position: absolute;
  height: 40px;
  width: 40px;
  transition: 0.5s;
  cursor: pointer;
}

.psvgS {
  transition: 0.5s;
  fill: #f5f5f5;
  cursor: pointer;
}

.PropertyCol .icon-box h5 {
  font-family: "Raleway", sans-serif;
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}

.PropertyCol .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  margin-top: 0;
}

.cta {
  overflow: hidden;
  background: #5cb874;
  padding: 80px 0;
}

.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-left: -440px;
  margin-top: 1px;
}

.cta p {
  color: #fff;
  /* margin-left: 400px; */
  position: relative;
  left: 120px;
  top: 9px;
}

.cta .cta-btn-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cta .col-lg-3 {
  flex: 0 0 auto;
  width: 25%;
}

.cta .cta-btn {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 2px;
  transition: 0.5s;

  margin: 10px;
  margin-top: 20px;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 4px;
}

.cta .cta-btn:hover {
  color: #5cb874;
  background-color: #fff;
}



.back-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #5cb874;
  position: fixed;
  bottom: 15px;
  right: 25px;
  z-index: 999;
  border-radius: 4px;
  transition: all 0.4s;
  opacity: 0;
  cursor: pointer;
}

.back-arrow img {
  width: 22px;
  height: 22px;
}
</style>
